<template>
  <div class="aside-menu">
    <div class="aside-menu-inner">
      <div class="top-logo">
        <div class="logo router-link-active" @click="goHome"></div>
        <div class="menu-icon" v-if="!isPC">
          <svg
            data-v-86b4cd78=""
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              data-v-86b4cd78=""
              d="M4 18H15C15.55 18 16 17.55 16 17C16 16.45 15.55 16 15 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H12C12.55 13 13 12.55 13 12C13 11.45 12.55 11 12 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H15C15.55 8 16 7.55 16 7C16 6.45 15.55 6 15 6H4C3.45 6 3 6.45 3 7ZM20.3 14.88L17.42 12L20.3 9.12C20.69 8.73 20.69 8.1 20.3 7.71C19.91 7.32 19.28 7.32 18.89 7.71L15.3 11.3C14.91 11.69 14.91 12.32 15.3 12.71L18.89 16.3C19.28 16.69 19.91 16.69 20.3 16.3C20.68 15.91 20.69 15.27 20.3 14.88Z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="menu-list">
        <div
          class="link-item"
          @click="clickTab(idx)"
          :class="{ 'router-link-active': idx === menuIndex }"
          v-for="(item, idx) in menuList"
          :key="idx"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    menuList: [
      { icon: "", name: "矿池", url: "/pool" },
      { icon: "", name: "盲盒", url: "/blindBox" },
      { icon: "", name: "NFT市场", url: "/nftMarket" },
    ],
  }),
  computed: {
    isPC() {
      return this.$store.state.clientWidth > 960 ? true : false;
    },
    menuIndex() {
      let idx = this.menuList.findIndex(
        (item) => item.url === this.$route.path
      );
      return idx;
    },
  },
  mounted() {},
  methods: {
    clickTab(idx) {
      this.$router.push({ path: this.menuList[idx].url });
    },
    goHome() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style  lang="scss" scoped>
@import "./../common/styles/common.scss";
.aside-menu {
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 288px;
  height: 100vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px 0 16px 16px;
  .aside-menu-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%),
      0 4px 6px -2px rgb(0 0 0 / 5%);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%),
      0 4px 6px -2px rgb(0 0 0 / 5%);
    border-radius: 32px;
    height: 100%;
    padding: 16px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .top-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 32px;
  }
  .logo {
    height: 32px;
    width: 110px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0;
    background-image: url(./../assets/images/home/logo.png);
    text-indent: -999em;
    display: block;
  }
  .menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    width: 33px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    svg {
      fill: #431216;
      width: 72%;
    }
  }
  .menu-list {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0;
    overflow: auto;
    margin-top: 4px;
    padding: 0 16px;
    .link-item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #694f4e;
      position: relative;
      cursor: default;
      padding: 12px 0 12px 16px;
      border-radius: 12px;
    }
    .router-link-active {
      background-color: #fad551;
    }
  }
}
</style>
